<!-- 批发采购订单列表-质检 -->
<template>
  <div class="wholesale-purchase-order-product">
    <el-container class="qualityTesting-box">
      <div
        v-for="(item,index) in dataList"
        :key="index"
        class="qualityTesting-every-box">
        <div class="data-info-box">
          <p>收货单号：{{ item.receiveCode || '--' }}</p>
          <p>关联发货单号：{{ item.deliveryCode || '--' }}</p>
          <p>创建时间：{{ item.createdAt || '--' }}</p>
          <p>质检人：{{ item.checkUserName || '--' }}</p>
          <p>发票编号：{{ item.billNumber || '--' }}</p>
        </div>
        <div class="data-info-box data-info-box-tow">
          <div>
            <p>
              收货产品总数量：
              <span>{{ item.deliveryProdSum || '--' }}</span>
            </p>
            <p>
              品规数：
              <span>{{ item.prodTypeCount || '--' }}</span>
            </p>
            <p>
              总金额：
              <span>{{ item.deliveryTotalAmount || '--' }}</span>
            </p>
          </div>
          <div>
            <el-button
              type="primary"
              @click="toComplete(item)">
              <i class="el-icon-finished" />
              质检完成
            </el-button>
          </div>
        </div>
        <el-editable
          :data="item.pageBean.content"
          height="300"
          v-loading="tableLoading"
          :columns="qualityTestingTableData"
        >
          <template
            slot="default-registrationNumber"
            slot-scope="scope">
            <el-button
              :disabled="!scope.row.registrationNumber||!scope.row.registrationNumberId"
              v-html="regisNoButton(scope.row, 'registration')"
              @click="showPdfRegistion(scope.row.registrationNumberId)"
              type="text"
            />
          </template>
          <template
            slot="default-placeholder"
            slot-scope="scope">
            <el-editable
              class="product-info-box"
              :data="scope.row.bsDeliveryDistributorVOList"
              height="200"
              :columns="receivingGoodsItemArr"
            >
              <template
                slot="default-checkNum"
                slot-scope="scope">
                <el-input
                  disabled
                  v-model.number="scope.row.checkNum"
                />
              </template>
              <template
                slot="default-purchaseNum"
                slot-scope="scope">
                <el-input
                  v-model.number="scope.row.checkNum"
                  @change="changeReturn(scope.row)" />
              </template>
              <template
                slot="default-action"
                slot-scope="scope">
                <el-radio
                  v-model="radio"
                  label="1"
                  disabled>换</el-radio>
                <el-input
                  v-model="value1"
                  class="action-input"
                  disabled/>
                <el-radio
                  v-model="radio"
                  label="2"
                  disabled>退</el-radio>
                <el-input
                  v-model="value2"
                  class="action-input"
                  disabled/>
              </template>
            </el-editable>
          </template>
        </el-editable>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange($event,index)"
          @current-change="handleCurrentChange($event,index)"
          :current-page="pageList[index].curPage"
          :page-sizes="pageList[index].PAGE_NUMBER"
          :page-size='pageList[index].pageSize'
          :layout="pageList[index].PAGINATION_LAYOUT"
          :total="item.pageBean.totalElements"
        />
      </div>
    </el-container>
  </div>
</template>

<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import {
  qualityTestingTableData,
  receivingGoodsItemArr,
  showPdfRegistion,
  regisNoButton } from './const'
import { hasIn, isObject } from 'lodash'
import {
  getSaleOrderDeliveryDetail,
  addOrderCheck,
  deliverySixPageList
} from '@const/beforeSettleApi'

import ElEditable from '@components/el-editable'
import tabs from '@components/tabs/index.vue'
export default {
  components: { ElEditable },
  data () {
    return {
      radio: '1',
      value1: '0',
      value2: '',
      qualityTestingTableData,
      receivingGoodsItemArr,
      tableLoading: false,
      dataList: [
        // {
        //   receiveCode: '11'
        // }
      ],
      pageList: []
    }
  },

  created () {
    this.getDataList()

    const btn = {
      type: 'btn',
      arr: [{ type: 'button', val: '返回', handle: this.back }]
    }
    this.$store.commit('changeLayoutHandle', btn)
  },

  methods: {
    showPdfRegistion,
    regisNoButton,
    //   质检完成
    toComplete (data) {
      let arr = []
      data.pageBean.content.forEach(item => {
        item.bsDeliveryDistributorVOList.forEach(v => {
          let obj = {
            deliveryDistributorId: v.id, // 发货扫码id
            deliveryItemId: item.deliveryItemId, // 发货明细单Id
            checkNum: v.checkNum
          }
          arr.push(obj)
        })
      })
      let obj = {
        deliveryId: data.deliveryId, // 发货订单id
        receiveCode: data.receiveCode, // 收货单号
        saleOrderId: data.saleOrderId, // 采购订单id
        distributorFormList: arr
      }
      this.$axios({
        method: 'post',
        url: addOrderCheck,
        data: obj
      }).then(res => {
        if (Number(res.data.code) === 0) {
          this.$message({
            message: '质检完成！',
            type: 'success',
            duration: '800'
          })
          this.back()
        }
      })
    },
    // 点击返回
    back () {
      this.$router.go(-1)
    },
    // 页码更改调用
    deliverySixPageList (ind) {
      this.$axios({
        method: 'post',
        url: deliverySixPageList,
        data: {
          orderId: this.$route.query.id,
          purchaseOrderStatus: 9,
          deliveryId: this.dataList[ind].deliveryId,
          page: this.pageList[ind].curPage, // 当前页
          pageSize: this.pageList[ind].pageSize
        }
      }).then(({ data }) => {
        let content = hasIn(data, 'payload.content') ? data.payload.content : []
        this.dataList[ind].pageBean.content = content
      })
    },
    // 页码更改
    handleSizeChange ($event, index) {
      this.pageList[index].pageSize = $event
      this.deliverySixPageList(index)
    },
    // 切换不一样的页面,重置一切数据
    handleCurrentChange ($event, index) {
      this.pageList[index].curPage = $event
      this.deliverySixPageList(index)
    },
    // 获取产品列表
    getDataList () {
      this.tableLoading = true
      this.$axios({
        method: 'post',
        url: getSaleOrderDeliveryDetail,
        data: {
          id: this.$route.query.id,
          purchaseOrderStatus: this.$route.query.purchaseOrderStatus,
          page: 1,
          pageSize: 20
        }
      })
        .then(res => {
          this.dataList = hasIn(res, ['data', 'payload'])
            ? res.data.payload
            : []
          this.pageList = this.dataList.map(item => {
            return {
              curPage: 1, // 当前页
              PAGE_NUMBER, // 页码数组
              PAGINATION_LAYOUT, // 页码功能布局
              pageSize: PAGE_NUMBER[0] // 一页的数量
            }
          })
        })
        .finally(() => {
          this.tableLoading = false
        })
    }
  }
}
</script>

<style lang="less">
.wholesale-purchase-order-product {
  .qualityTesting-box {
    height: 100%;
    overflow: auto;
    .qualityTesting-every-box {
      width: 100%;
      .data-info-box {
        display: flex;
        p {
          margin-right: 30px;
          margin-bottom: 10px;
          margin-top: 10px;
          span {
            color: #06f;
            font-weight: bold;
          }
        }
      }
      .pagination {
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        padding-right: 0;
      }
      .data-info-box-tow {
        display: flex;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
        }
      }
      .action-input {
        width: 50px;
      }
    }
  }
}
</style>
